<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/buttons.css" rel="stylesheet">
	<style>
		.help-inline{
			color:red;
			margin-left:15px;
		}
		label {
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	
	<div class="col-md-10 col-md-offset-2" style="margin-top:80px">
		<form id="registerHere" method='post' action='signupAction.action' data-validate="enable">
			<div class="form-horizontal">
				<div class="form-group">
					<label for="username" class="col-md-2"> Name: </label>
					<div class="col-md-2">
						<input type="text" class="form-control" id="username" autocomplete = "off"
							name="username" data-rules="required:true,minlength:2"
							placeholder="Enter Username">
					</div>
				</div>

				<div class="form-group">
					<label for="email" class="col-md-2"> Email address: </label>
					<div class="col-md-4">
						 <s:textfield type="text" class="form-control" id="email" name="email" autocomplete = "off"
							placeholder="Enter email address"
							data-rules="email:true,required:true"/>
						<p class="help-block">Example: yourname@domain.com</p>
					</div>
				</div>

				<div class="form-group">
					<label for="password" class="col-md-2"> Password: </label>
					<div class="col-md-4">
						<input type="password" id="password" name="password"
							class="form-control" placeholder="Enter Password"
							data-rules="required:true, minlength:6, alphanumeric:true">
						<p class="help-block">Min: 6 characters (Alphanumeric only)</p>
					</div>
				</div>

				<div class="form-group">
					<label for="repassword" class="col-md-2"> Confirm Password:
					</label>
					<div class="col-md-4">
						<input type="password" id="repassword" name="repassword"
							class="form-control" data-rules="required:true, equalTo:true"
							placeholder="Confirm Password">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-md-2">
					</label>
					<div class="col-md-2">
						<img src="simple-captcha.png" />
					</div>
					<label>Cannot read? Press F5 to refresh</label>
				</div>
				
				<div class="form-group">
					<label for="repassword" class="col-md-2">  Enter the Code:
					</label>
					<div class="col-md-4">
						<input type="text"  name="captchaAnswer" id="captchaAnswer"
							class="form-control" data-rules="required:true"
							placeholder="Enter the code"/>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="controls">
					<input type="submit" class="btn btn-blue" value="Create My Account"/>
				</div>
			</div>
		</form>
	</div>
</body>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript" src="js/guhappy-validation.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/guhappy.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$("#question_a li a").bind('click', function(e) {
		$("#question_a_btn").text($(this).text());
	});
	
	$("#question_b li a").bind('click', function(e) {
		$("#question_b_btn").text($(this).text());
	});
	
	$("#question_c li a").bind('click', function(e) {
		$("#question_c_btn").text($(this).text());
	});

	$('#user_fname').focus();
});
</script>
</html>